<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<head>

	<%--引入fs--%>
	<meta charset="utf-8">
	<title>Layui</title>
	<meta name="renderer" content="webkit">
		<meta http-equiv ="Pragma" content = "no-cache"/>
		<meta http-equiv="Cache-Control" content="no cache" />
		<meta http-equiv="Expires" content="0" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
	      content="width=device-width, initial-scale=1, maximum-scale=1">

		<script src="https://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
		<link href="https://cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="plugins/layui/css/layui.css" media="all"/>
		<link rel="stylesheet" type="text/css" href="css/fs.css" media="all"/>
		<script type="text/javascript" src="plugins/layui/layui.js"></script>
		<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="plugins/frame/js/fs.js?v=1.5.0"></script>
		<script type="text/javascript" src="plugins/frame/js/frame.js?v=1.5.0"></script>

	<%--<link rel="stylesheet" href="./layui/css/layui.css"--%>
	      <%--media="all">--%>
	<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	<style>
        .wrap-div {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            float: left;
            width: 100%;
            word-break: break-all;
            text-overflow: ellipsis;
        }
	</style>
</head>
<body>

<div class="layui-nav-item demoTable"
     style="display: flex;justify-content: flex-end;">
	<div class="layui-form-query">
		<form class="layui-form" id="query_form" >

            <div class="layui-form-item">

            <input id="search" type="text" name="search" class="layui-input"
	       style="padding: 0;display: inline;width: 300px;"
	       placeholder="请输入搜索信息..."/>
	<button class="layui-btn" type="button" function="query" tableId="fsDatagrid"
			style="margin-left: 20px;">搜索
	</button>
            </div>
        </form>
	</div>
</div>

<%--使用c:foreach标签并不能完成搜索的操作，需要刷新页面网页才会刷新 这里使用fs layui的数据表单--%>

<div class="layui-form" id="content">

	<table id="fsDatagrid" lay-filter="fsDatagrid" class="fsDatagrid" isLoad="1" url="/book/search" inputs="search"
		   isPage="1" defaultForm="query_form" height="full-135" page-size="10" >
	</table>
	<div class="fsDatagridCols">
		<p type='numbers' title='序号' />
		<p field='name' title='书名' width='150' />
		<p field="author" title="作者" width="150" sort="true"/>
		<p field="sort" title="分类" width="200" sort="true"/>
		<p field="description" title="描述" width="180" />
		<p field="store" title="收藏状态" width="150" templet="#stateTpl"/>
		<p fixed="right" align="center" toolbar="#barDemo" title="操作" width="220"/>
	</div>

	<script type="text/html" id="stateTpl">
		<input type="checkbox" name="store"  lay-skin="switch" lay-text="已收藏|未收藏" {{ d.store ? 'checked' : '' }}>
	</script>

	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="top" topUrl="bookDetail.jsp"
		   topMode="readonly" topWidth="800px" topHeight="680px" topTitle="查看详细信息" inputs="id:">查看</a>
		<a class="layui-btn layui-btn-xs borrow" id="store" lay-event="submit" inputs="id:" url="/book/store">
			收藏
		</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="submit" inputs="book_id:$id" url="/book/borrow">借阅</a>
	</script>

</div>

<div id="page" style="display: flex;justify-content: center;">
</div>

<%--<script src="./layui/layui.js" charset="utf-8"></script>--%>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

</body>
</html>
